<template>
<div id="myWalletRecharge">
      <!--后退-->
      <img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)">
      <div class="recharge">
            <p>请选择充值金额</p>
            <section>
                <p v-for="(item,index) in values" v-bind:class="{active:isActive==index}" @click="rechargeSel(index)">{{item}}￥</p>
            </section>
            <input type="text"  placeholder="请输入其他金额">
            <router-link to="/resetPsw" style="text-decoration:none;">
              <p class="next"style="">确定</p>
          </router-link>
      </div>               
</div>
</template>
<script>
export default {
  data () {
    return {
      isActive:false,
      values:[10,20,30]
    }
  },
  methods:{
    rechargeSel(i){
      this.isActive=i;
    }
  }
}
</script>
<style>
#myWalletRecharge{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url('../../../assets/me/rechargeBg.png')
}
#myWalletRecharge .back{
    height:1rem;
    width:0.6rem;
    margin:1rem 0.6rem;
}
#myWalletRecharge .recharge{
    margin:22vh auto;
    width:80%;
}
#myWalletRecharge .recharge > p:nth-child(1){
    font-size:0.9rem;
    color:#888888;
}
#myWalletRecharge .recharge > section{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:5vh;
}
#myWalletRecharge .recharge > section > p{
    height:2.25rem;
    line-height:2.25rem;
    width:4.5rem;
    text-align:Center;
    background:#f8f8f8;
    color:#8a8a8a;
    margin-right:0.75rem;
}
#myWalletRecharge .recharge > input{
    width:60%;
    height:2.25rem;
    line-height:2.25rem;
    font-size:0.7rem;
    padding:0px 0.75rem;
    background:#f8f8f8;
    color:#8a8a8a;
    margin-right:0.75rem;
    margin-top:1.5rem;
}
#myWalletRecharge .recharge .next{
    height:2.5rem;
    line-height:2.5rem;
    text-align:center;
    width:40%;
    margin:1.5rem auto;
    border-radius:13px;
    background:#29a193;
    color:#fff;
}
#myWalletRecharge .recharge .active{
    background:#69b373;
    color:#fff;
}
</style>